<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>12-案例+知识点补充</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";background:#e2c5c5;}
			#box{width:480px;height:540px;background:#fff;margin:50px auto;}
			#box .header{width:100%;height:50px;}
			#box .header .header-a{width:168px;height:50px;text-align:center;margin-left:20px;float:left;}
			#box .header .header-a img{margin-top:15px;}
			#box .header .header-a p{line-height:50px;}
			#box .header p{color:#ccc;float:right;}
			#box .header p a{display:block;width:80px;height:50px;text-align:center;line-height:50px;color:#ccc;}
			#box ul li{width:150px;height:230px;margin:3px;float:left;}
			#box ul li a{color:#111;font-weight:600;}
			#box ul li a img{width:150px;height:150px;}
			#box ul li h4{margin-left:10px;}
			#box ul li a p,span{padding:10px;}
			#box ul li a .ul-p{color:#ccc;}
			#box ul li a .ul-span{color:#4ed1de;}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div class="header">
				<a class="header-a" href="###">
					<img src="../images/goods.png" width="60px" height="20px" alt="goods"/>
					<p>与品质生活不期而遇</p>
				</a>
				<p><a href="###">换一换</a></p>
			</div>
			<ul>
				<li>
					<a href="###">
						<img src="../images/pro1.jpg" alt="pro1" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/pro2.jpg" alt="pro2" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/pro3.jpg" alt="pro3" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/pro4.jpg" alt="pro4" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/pro5.jpg" alt="pro5" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/pro6.jpg" alt="pro6" />
						<h4>HASO中式扣连帽外套</h4>
						<p class="ul-p">别致的中式盘扣,兼备实</p>
						<span class="ul-span">0人说好</span>
					</a>
				</li>
			</ul>
		</div>
		
		
		
	</body>
</html>
